<template>
  <el-form label-width="120px" ref="formRef" :model="form" :rules="formRules">
    <el-tabs type="border-card" v-model="currentTab">
      <el-tab-pane name="basic" label="基本信息">
        <el-row>
          <el-col :span="12">
            <el-form-item label="表名称" prop="name">
              <el-input v-model="form.name" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="表描述" prop="comment">
              <el-input v-model="form.comment" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类名称" prop="className">
              <el-input v-model="form.className" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="作者" prop="functionAuthor">
              <el-input v-model="form.functionAuthor" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" clearable type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane name="info" label="生成信息">
        <el-row>
          <el-col :span="12">
            <el-form-item label="生成模板" prop="categoryId">
              <el-select v-model="form.categoryId">
                <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in categoryList"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生成包路径" prop="packageName">
              <el-input v-model="form.packageName" clearable></el-input>
              <div class="el-form-item-msg">（生成在哪个 JAVA 包下）</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生成模块名" prop="moduleName">
              <el-input v-model="form.moduleName" clearable></el-input>
              <div class="el-form-item-msg">
                （Rest 注解请求路径中的第一部分，用于区分模块所用）<br/>（前台目录的第一层目录）
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生成业务名" prop="businessName">
              <el-input v-model="form.businessName" clearable></el-input>
              <div class="el-form-item-msg">
                （Rest 注解请求路径中的第二部分，用于区分模块下业务所用） <br/>（前台目录的第二层目录）
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生成功能名" prop="functionName">
              <el-input v-model="form.functionName" clearable></el-input>
              <div class="el-form-item-msg">（类注释、方法注释中显示）</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生成代码方式" prop="generatorType">
              <el-radio v-model="form.generatorType" label="0">压缩包（ZIP）</el-radio>
              <el-radio v-model="form.generatorType" label="1">自定义路径</el-radio>
              <div class="el-form-item-msg">（默认为：压缩包（ZIP）下载，也可以自定义生成路径）</div>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="form.generatorType === '1'">
            <el-form-item label="自定义路径" prop="generatorPath">
              <el-input v-model="form.generatorPath"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="上级菜单" prop="parentMenuId">
              <el-tree-select ref="menuTreeSelect" size="large" clearable check-strictly highlight-current collapse-tags
                              collapse-tags-tooltip check-on-click-node node-key="id" style="width: 100%"
                              :render-after-expand="false" :data="menuList" :props="categoryProps"
                              v-model="form.parentMenuId" placeholder="请选择上级菜单"></el-tree-select>
              <div class="el-form-item-msg">（分配到指定菜单下）</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </el-form>
</template>

<script setup lang="js">
import {onMounted, reactive, ref} from "vue";
import categoryApi from "@/api/generator/category";
import menuApi from "@/api/system/menu";
import treeUtil from "@/utils/tree";

const props = defineProps({
  form: {
    type: Object,
    default: {}
  }
})
const categoryProps = {
  label: (data) => data.name + "-" + data.code,
  children: 'children',
}
const currentTab = ref('basic');
const formRef = ref();
const categoryList = ref();
const menuList = ref();
const formRules = reactive({
  name: [{required: true, message: "名称为必填项", trigger: "blur"}],
  comment: [{required: true, message: "描述为必填项", trigger: "blur"}],
  className: [{required: true, message: "类名为必填项", trigger: "blur"}],
  functionAuthor: [{required: true, message: "作者为必填项", trigger: "blur"}],
  categoryId: [{required: true, message: "模板分类为必填项", trigger: "blur"}],
  packageName: [{required: true, message: "包名为必填项", trigger: "blur"}],
  moduleName: [{required: true, message: "模块名为必填项", trigger: "blur"}],
  businessName: [{required: true, message: "业务名为必填项", trigger: "blur"}],
  functionName: [{required: true, message: "功能名为必填项", trigger: "blur"}],
  generatorType: [{required: true, message: "生成方式为必填项", trigger: "blur"}],
  generatorPath: [{required: true, message: "生成路径为必填项", trigger: "blur"}],
  parentMenuId: [{required: true, message: "上级菜单为必填项", trigger: "blur"}],
});
const getFormRef = () => {
  return formRef.value;
}

onMounted(() => {
  categoryApi.lists.get({enabled: true, isExtend: true}).then(response => {
    categoryList.value = response.data.list;
  })
  menuApi.lists.get({isExtend: true}).then(response => {
    menuList.value = treeUtil.buildTree(response.data.list.filter(item => item.type === 'DIRECTORY'));
  })
});

defineExpose({getFormRef});
</script>
